<template>
  <div class="monitor-page">
    <h2>实时监控</h2>
    <div class="monitor-grid">
      <div class="monitor-card">
        <div class="monitor-header">CPU使用率</div>
        <div class="monitor-value">78%</div>
        <div class="monitor-chart">
          <div class="progress-bar" style="width: 78%"></div>
        </div>
      </div>
      <div class="monitor-card">
        <div class="monitor-header">内存使用率</div>
        <div class="monitor-value">65%</div>
        <div class="monitor-chart">
          <div class="progress-bar" style="width: 65%"></div>
        </div>
      </div>
      <div class="monitor-card">
        <div class="monitor-header">网络流量</div>
        <div class="monitor-value">2.3GB/s</div>
        <div class="monitor-chart">
          <div class="progress-bar" style="width: 45%"></div>
        </div>
      </div>
      <div class="monitor-card">
        <div class="monitor-header">磁盘使用率</div>
        <div class="monitor-value">42%</div>
        <div class="monitor-chart">
          <div class="progress-bar" style="width: 42%"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MonitorPage'
}
</script>

<style scoped>
.monitor-page {
  height: 100%;
  padding: 40px;
}

.monitor-page h2 {
  font-size: 36px;
  margin-bottom: 40px;
  text-align: center;
}

.monitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  height: calc(100% - 100px);
}

.monitor-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.monitor-card:hover {
  transform: translateY(-5px);
}

.monitor-header {
  font-size: 20px;
  margin-bottom: 15px;
}

.monitor-value {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

.monitor-chart {
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #409eff, #67c23a);
  transition: width 0.3s ease;
}

@media (max-width: 768px) {
  .monitor-grid {
    grid-template-columns: 1fr;
  }
}
</style> 